<template>
  <div class="order">
    <van-nav-bar title="我的订单" :fixed="true"></van-nav-bar>

    <div class="t">
    <van-tabs v-model="active" animated swipeable @change="Switch">
      <van-tab
        v-for="(item, index) in tabData"
        :key="index"
        :title="item.title"
      >
        <div class="content" v-if="isLogin == true">
          <van-empty v-if="isLogin==true&&orderData.length == 0" description="暂时没有订单" />
          <div class="order-item" v-for="(e, i) in orderData" :key="i">
            <div class="order-item-top">
              <div class="orderID">订单编号：{{ e.oid }}</div>
              <div class="orderState">
                {{ e.status == 1 ? "进行中" : "已完成" }}
              </div>
            </div>
            <div class="order-item-center">
              <div class="wares" v-for="(e1, i1) in e.wares" :key="i1">
                <div class="wares-left">
                  <img :src="e1.smallImg" alt="" />
                </div>
                <div class="wares-right">
                  <div class="wares-right-t">
                    <div class="name">{{ e1.name }}</div>
                    <div class="price">&yen;{{ e1.price }}</div>
                  </div>
                  <div class="wares-right-b">
                    <div class="specs">{{ e1.rule }}</div>
                    <div class="quantity">
                      x<span>{{ e1.count }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="order-item-bottom">
              <div class="order-item-bottom-t">
                <div class="order-time">{{ e.time }}</div>
                <div>
                  <span class="total"> 共{{ e.total }}件商品 </span>
                  <span>
                    合计：
                    <span class="totalPrice"> &yen;{{ e.totalPrice }}</span>
                  </span>
                </div>
              </div>
              <div class="order-item-bottom-b">
                <button
                  class="btn"
                  v-if="e.status == 1"
                  @click="takeDelivery(e, i, index)"
                >
                  确认收货
                </button>
                <button class="btn" v-else @click="zlyd(e)">再来一单</button>
              </div>
            </div>
          </div>
        </div>

        <div v-if="isLogin == false">
          <van-empty description="您尚未登录，请先前往登录">
            <van-button
              round
              type="danger"
              class="bottom-button"
              color="#0022ab"
              @click="toLogin"
              >去登录</van-button
            >
          </van-empty>
        </div>
      </van-tab>
    </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "Order",
  data() {
    return {
      isLogin: true,
      active: 0,
      orderData: [],
      tabData: [
        {
          title: "全部",
        },
        {
          title: "进行中",
        },
        {
          title: "已完成",
        },
      ],
    };
  },
  created() {
    this.getOrderData();
  },
  methods: {
    toLogin() {
      this.$router.push({name:"Login"});
    },
    getOrderData() {
      this.axios({
        method: "get",
        url: "/findOrder",
        params: {
          status: this.active,
        },
      }).then((result) => {
        if (result.data.code == 700) {
          this.isLogin = false;
        }
        if (result.data.code == 70000) {
          let orderID = [];
          result.data.result.forEach((item) => {
            if (orderID.indexOf(item.oid) == -1) {
              orderID.push(item.oid);
            }
          });

          let orderData = [];
          orderID.forEach((i) => {
            let orderItem = {
              oid: i,
              wares: [],
              total: 0,
              totalPrice: 0,
            };
            result.data.result.forEach((v) => {
              if (i == v.oid) {
                let date = `${v.updatedAt.split("T")[0]} ${
                  v.updatedAt.split("T")[1].split(".")[0]
                }`;

                orderItem.status = v.status;
                orderItem.time = date;
                orderItem.wares.push(v);
                orderItem.total += v.count;
                orderItem.totalPrice += v.count * v.price;
              }
            });
            orderData.push(orderItem);
          });
          this.orderData = orderData;

        }
      });
    },
    Switch() {
      this.getOrderData();
    },
    takeDelivery(e, i, index) {
      this.axios({
        method: "post",
        url: "/receive",
        data: {
          oid: e.oid,
        },
      }).then((result) => {

        if (result.data.code == 80000) {
          this.$toast("确认收货成功");
          e.status = 2;
          if (index == 1) {
            this.orderData.splice(i, 1);
          }
        }
      });
    },
    zlyd(e) {
      e.wares.forEach((item) => {

        this.axios({
          method: "post",
          url: "/addShopcart",
          data: {
            pid: item.pid,
            count: item.count,
            rule: item.rule,
          },
        }).then((result) => {

          if (result.data.code == 3000) {
            this.$toast(result.data.msg);
            setTimeout(() => {
              this.$router.push({name:"ShopBag"});
            }, 1000);
          }
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.order {
  // padding-top: 46px;
  padding-bottom: 50px;
  padding-top: 76px;
  .van-nav-bar--fixed{
    padding-top: 30px;
    background-color: #0022ab;
  }
  /deep/.van-nav-bar__title{
    color: #fff;
  }
  .t{
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    bottom: 50px;
    overflow-y: auto; 
    /deep/.van-tabs__wrap{
      position: fixed;
      top: 76px;
      left: 0;
      right: 0;
      z-index: 999;
    }
    /deep/.van-tabs__line{
      background-color: #0022ab;
    }  
  }
  .content {
    width: 100%;
    height: 100%;
    padding: 10px;
    margin-top: 50px;
    .order-item {
      margin-bottom: 10px;
      width: 100%;
      background-color: #fff;
      padding: 10px;
      border-radius: 10px;
      .order-item-top {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
        padding: 10px 0;
        .orderID {
          color: #888;
        }
      }
      .order-item-center {
        margin: 10px 0;
        .wares {
          display: flex;
          margin: 3px 0;
          .wares-left {
            margin-right: 10px;
            img {
              width: 80px;
              height: 80px;
              border-radius: 50%;
            }
          }
          .wares-right {
            width: calc(100% - 90px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            .wares-right-t {
              height: 20px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .name {
                font-size: 15px;
              }
              .price {
                font-size: 15px;
                color: #0022ab;
                font-weight: 600;
              }
            }
            .wares-right-b {
              height: 20px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-top: 5px;
              .quantity {
                span {
                  font-size: 15px;
                }
              }
              .specs {
                color: #888;
              }
            }
          }
        }
      }
      .order-item-bottom {
        border-top: 1px dashed #ccc;
        padding: 10px 0;
        .order-item-bottom-t {
          display: flex;
          justify-content: space-between;
          .totalPrice {
            font-size: 15px;
            font-weight: 600;
            color: #0022ab;
          }
        }
        .order-item-bottom-b {
          margin-top: 10px;
          text-align: right;
          .btn {
            padding: 5px 15px;
            border: 1px solid #0022ab;
            border-radius: 20px;
            background-color: #fff;
            color: #0022ab;
          }
        }
      }
    }
  }
}
</style>